import React, { Component } from 'react'
import  '../assets/style/Tag.less'
import Input from './Input'
let {Object}=window
export default class Tags extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tags: [],
            style:{}
        }
    }

    getTags = (event) => {
        if (event.target.checked) {
            this.state.tags.push(event.target.value)
        } else {
            let index = this.state.tags.indexOf(event.target.value)
            this.state.tags.splice(index, 1)
        }
        this.forceUpdate()
        this.props.getData(this.state.tags, event.target.checked)
    }

 
    render() {
        let style = this.props.style ? this.props.style : {}
        if (this.props.data.length && this.props.data.indexOf(this.props.value) !== -1) {
            this.state.style.background = this.props.background ? this.props.background : "blue"
            this.state.style.color = this.props.color ? this.props.color : "white"
        } else {
            this.state.style.background = this.props.initBackground ? this.props.initBackground : "white"
            this.state.style.color = this.props.initColor ? this.props.initColor : "black"
        }
        let obj = { ...style, ...this.state.style }
        return (
            <span className="tagstyle" style={obj}>
                <Input type="checkbox" checked={(this.props.data&&this.props.data.indexOf(this.props.value) === -1)?false:true}  onClick={this.getTags} value={this.props.value} name={this.props.name} className="tagsInput"></Input>
                <span className="label_tags"  >{this.props.value}</span>
            </span>
        )
    }
}
